<template>
  <view class="page">
    <view class="header">
      <image
        class="logo"
        src="https://mkservice.mk-iot.com/subFile/mk2240/rectangle_icon.png"
        mode="widthFix"
      ></image>
    </view>
    <view class="content">
      <!--			轮播图-->
      <view class="banner-container">
        <!-- <banner
          :position="7"
          height="200rpx"
        ></banner> -->
      </view>
      <!--			应用功能-->
      <view class="appList">
        <view
          class="app-item"
          @click="
            () =>
              $uni.navigateTo({
                url: '/markingCampaign/pages/DuXueMemberCenter/join/index',
              })
          "
        >
          <image
            class="icon"
            :src="communicationIcon"
          ></image>
          <view class="text">tab1</view>
        </view>
        <view
          class="app-item"
          @click="goToVocabularyPlanInfoPage"
        >
          <image
            class="icon"
            :src="wordIcon"
          ></image>
          <view class="text">tab1</view>
        </view>
        <view
          class="app-item"
          @click="
            () =>
              $uni.navigateTo({
                url: '/markingCampaign/pages/pointsMall/index/index',
              })
          "
        >
          <image
            class="icon"
            :src="shopIcon"
          ></image>
          <view class="text">tab1</view>
        </view>
        <view
          class="app-item"
          @click="
            () =>
              $uni.navigateTo({
                url: '/markingCampaign/pages/dailyNews/index/index',
              })
          "
        >
          <image
            class="icon"
            :src="informationIcon"
          ></image>
          <view class="text">tab1</view>
        </view>
      </view>
      <!--			我的自习-->
      <view class="block">
        <view class="header">
          <view class="title">tab1</view>
          <view
            class="view-more-btn"
            @click="
              () =>
                $uni.navigateTo({
                  url: '/mine/pages/learningLog/index',
                })
            "
          >
            <text>右边标题 &gt;</text>
          </view>
        </view>
        <view class="content">
          <!--					自习室 / 排行榜-->
          <view class="tab-list">
            <view
              class="tab-item"
              v-for="item in tabList"
              :key="item"
              :class="{ active: currentSelectTab === item }"
              @click="() => (currentSelectTab = item)"
              >{{ item }}</view
            >
          </view>
          <!--					自习室-->
          <view
            class="tab-page"
            v-if="currentSelectTab === '自习室'"
            @click="
              () =>
                $uni.navigateTo({
                  url: '/studyRoom/pages/studyRoomList/index',
                })
            "
          >
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/rectangle_icon.png"
              mode="widthFix"
              class="image"
            ></image>
            <!--						去自习按钮-->
            <view class="go-to-study-btn btn">右标题</view>
          </view>
          <!--					排行榜-->
          <view
            class="tab-page"
            v-else-if="currentSelectTab === '排行榜'"
            @click="
              () =>
                $uni.navigateTo({
                  url: '/studyRoom/pages/rank/index',
                })
            "
          >
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/rectangle_icon.png"
              mode="widthFix"
              class="image"
            ></image>
            <!--						看排名按钮-->
            <view class="view-rank-btn btn">看排名</view>
          </view>
        </view>
      </view>
      <!--			督学打卡活动-->
      <view class="block">
        <view class="header">
          <view class="title">左边左边活动</view>
          <view
            class="view-more-btn"
            @click="
              () =>
                $uni.navigateTo({
                  url: '/studyRoom/pages/activity/list',
                })
            "
          >
            <text>查看更多 &gt;</text>
          </view>
        </view>
        <view class="content">
          <image
            src="https://mkservice.mk-iot.com/subFile/mk2240/rectangle_icon.png"
            mode="widthFix"
            class="banner"
            @click="
              () =>
                $uni.navigateTo({
                  url: '/studyRoom/pages/activity/list',
                })
            "
          ></image>
          <!--					活动列表（只取前面3个）-->
          <view class="activity-list">
            <view
              class="activity-item"
              v-for="item in activityList"
              :key="item.studyActivityId"
              @click="
                () =>
                  $uni.navigateTo({
                    url: handleUrlParams('/studyRoom/pages/activity/detail', {
                      studyActivityId: item.studyActivityId,
                    }),
                  })
              "
            >
              <!--							活动图片-->
              <image
                src="https://mkservice.mk-iot.com/subFile/mk2240/rectangle_icon.png"
                class="activity-logo"
                v-if="item.activityLogo"
                mode="widthFix"
              ></image>
              <!--							活动名称-->
              <view class="activity-name">{{ item.activityName }}</view>
              <!--							活动时长-->
              <view class="activity-duration">
                <image
                  :src="rightIcon"
                  class="icon"
                ></image>
                <view>{{ getActivityDuration(item) }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- <customTabbar></customTabbar> -->
  </view>
</template>

<script>
  // import rightIcon from './assets/right.png'
  // import communicationIcon from './assets/communication.png'
  // import practiceIcon from './assets/practice.png'
  // import wordIcon from './assets/word.png'
  // import informationIcon from './assets/information.png'
  // import shopIcon from './assets/shop.png'

  // import request from '../../utils/request'
  // import { getShowNginxPicUrl } from '@/utils/settings'
  // import { getShowImage, handleUrlParams } from '@/utils'
  // import dateUtils from '@/utils/dateUtils'
  // import moment from '@/lib/moment.min'
  // import store from '@/store'
  // import { vocabularyLearningActionType } from '@/store/modules/vocabularyLearning'

  // import customTabbar from '@/components/customTabbar/index.vue'
</script>

<style lang="scss" scoped>
  .page {
    padding-bottom: calc(172rpx + env(safe-area-inset-bottom));
    > .header {
      > .logo {
        width: 350rpx;
      }
    }
    > .content {
      padding: 0 30rpx;
      > .banner-container {
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        overflow: hidden;
      }
      > .appList {
        margin-top: 30rpx;
        display: flex;
        > .app-item {
          width: 25%;
          display: flex;
          flex-direction: column;
          align-items: center;
          > .icon {
            width: 72rpx;
            height: 72rpx;
          }
          > .text {
            font-size: 30rpx;
            margin-top: 10rpx;
          }
        }
      }
      > .block {
        margin-top: 70rpx;
        > .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          > .title {
            font-size: 34rpx;
            font-weight: bold;
          }
          > .view-more-btn {
            font-size: 30rpx;
            color: #999999;
          }
        }
        > .content {
          margin-top: 30rpx;
          > .tab-list {
            display: flex;
            > .tab-item {
              margin-right: 24rpx;
              padding: 6rpx 40rpx;
              font-size: 30rpx;
              background: #d7eee7;
              border-radius: 26rpx;
              color: #2cb980;
              &.active {
                background: white;
                border: 3rpx solid #2cb980;
              }
            }
          }
          > .tab-page {
            margin-top: 30rpx;
            position: relative;
            > .image {
              border-radius: 20rpx;
              width: 100%;
            }
            > .btn {
              position: absolute;
              left: 60rpx;
              bottom: 28rpx;
              padding: 6rpx 38rpx;
              font-size: 28rpx;
              color: white;
              border-radius: 27rpx;
            }
            > .go-to-study-btn {
              background: #2cb980;
              border: 2rpx solid #0e815d;
            }
            > .view-rank-btn {
              background: #4399fd;
              border: 2rpx solid #1a4dcc;
            }
          }
          > .banner {
            border-radius: 30rpx;
            width: 100%;
          }
          > .activity-list {
            display: flex;
            margin-top: 30rpx;
            > .activity-item {
              width: 0;
              flex: 1;
              background: #f4f5f7;
              padding: 20rpx;
              border-radius: 30rpx;
              &:not(:last-child) {
                margin-right: 30rpx;
              }
              > .activity-logo {
                width: 100%;
                border-radius: 20rpx;
              }
              > .activity-name {
                margin-top: 20rpx;
                font-size: 28rpx;
                width: 100%;
                //文本限制两行，超出两行加省略号
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
              > .activity-duration {
                margin-top: 10rpx;
                color: #b1581e;
                font-size: 30rpx;
                display: flex;
                align-items: center;
                > .icon {
                  width: 13rpx;
                  height: 13rpx;
                  margin-right: 40rpx;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
